<template>
    <el-dialog title="地图" :visible.sync="dialogVisible">
        <div id="mymap" class="map"></div>
    </el-dialog>
</template>

<script>
import load from "./dynamicLoadScript.js";
export default {
    data () {
        return {
            dialogVisible: false,
            address: '武汉市'
        }
    },
    watch: {
        dialogVisible (val) {
            if (val) {
                this.$nextTick(() => {
                    this.init();
                })
            }
        }
    },
    methods: {
        init () {
            load('https://webapi.amap.com/loader.js', (err) => {
                if (err) {
                    this.$message.error(err.message);
                    return;
                }
                AMapLoader.load({ //首次调用 load
                    key: 'd9384ad39143acb7d625b9e6479e47f1',//首次load key为必填
                    version: '2.0',
                    plugins: []
                }).then((AMap) => {
                    console.log(this.address);
                    this.markLocation(this.address);
                }).catch((e) => {
                    console.error(e);
                });
            });
        },
        markLocation (address) {
            var infoWindow = new AMap.InfoWindow({
                autoMove: true,
                offset: { x: 0, y: -30 }
            });
            AMap.plugin('AMap.Geocoder', function () {
                var geocoder = new AMap.Geocoder({
                    city: '武汉市'
                });
                geocoder.getLocation(address, function (status, result) {
                    console.log(result);

                    if (status === 'complete' && result.info === 'OK') {

                        // 经纬度                      
                        var lng = result.geocodes[0].location.lng;
                        var lat = result.geocodes[0].location.lat;

                        // 地图实例
                        var map = new AMap.Map('mymap', {
                            resizeEnable: true, // 允许缩放
                            center: [lng, lat], // 设置地图的中心点
                            zoom: 15 　　　　　　 // 设置地图的缩放级别，0 - 20
                        });

                        // 添加标记
                        var marker = new AMap.Marker({
                            map: map,
                            position: new AMap.LngLat(lng, lat),   // 经纬度
                        });

                        infoWindow.setContent(createContent(result.geocodes[0]));
                        infoWindow.open(map, marker.getPosition());

                        function createContent (poi) {  //信息窗体内容
                            var s = [];
                            s.push("地址：" + poi.formattedAddress);
                            return s.join("<br>");
                        }
                    } else {
                        console.log('定位失败！');
                    }
                });
            });
        },
    }
}
</script>

<style>
.map {
    height: 640px;
    width: 100%;
}
</style>